<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智联医防服务平台</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --secondary: #36D399;
            --accent: #FF9F43;
            --dark: #1E293B;
            --light: #F8FAFC;
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 80px;
        }

        .bg-gradient-blue {
            background: linear-gradient(135deg, var(--primary) 0%, #0F4C81 100%);
        }

        .nav-link {
            position: relative;
            color: var(--dark) !important;
            font-weight: 500;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary) !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

        .hero-section {
            padding-top: 40px;
            padding-bottom: 80px;
        }

        .hero-title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            line-height: 1.2;
        }

        .feature-card {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border: none;
        }

        .service-card {
            height: 100%;
            border-radius: 16px;
            overflow: hidden;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .section-title {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 2.5rem;
        }

        .notification-card {
            position: absolute;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            max-width: 290px;
            z-index: 20;
            margin-top: 10px;
        }

        .footer {
            background-color: var(--dark);
            color: white;
            margin-top: 100px;
            padding-top: 4rem;
            padding-bottom: 2rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: white;
        }

        .feature-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .stats-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
        }

        .video-thumbnail {
            height: 200px;
            object-fit: cover;
        }

        .profile-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            width: 240px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 0.5rem 0;
        }

        .show-dropdown:hover .profile-dropdown {
            display: block;
        }

        .nav-shadow {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .navbar {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        .record-item {
            border-left: 3px solid var(--primary);
            padding-left: 15px;
            margin-bottom: 25px;
        }

        .health-metric {
            height: 100%;
        }

        .profile-container {
            background-color: #f8f9fa;
            min-height: 100vh;
        }

        .right-shifted-img {
            right: -170px !important;
            width: 400px;
            height: 550px;
        }

        /* 新增的疾病预警卡片样式 */
        .warning-card {
            position: absolute;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            max-width: 290px;
            z-index: 20;
        }

        /* 图片横幅样式 */
        .image-banner {
            display: flex;
            gap: 1.0rem;
            margin-top: 60px;
            justify-content: center;
        }

        .image-banner img {
            max-width: 49%;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .image-banner img:hover {
            transform: translateY(-5px);
        }

        @media (max-width: 768px) {
            .image-banner {
                flex-direction: column;
                align-items: center;
                margin: 3rem 0;
            }

            .image-banner img {
                max-width: 100%;
                margin-bottom: 1.5rem;
            }
        }

        /* 新增的卡片区域样式 */
        .card-area {
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .card-group {
            display: flex;
            gap: 20px;
        }

        @media (max-width: 768px) {
            .card-area {
                flex-direction: column;
                align-items: center;
            }

            .card-group {
                width: 100%;
                margin-bottom: 20px;
            }
        }

        /* 调整后的英雄区域右侧图片样式 */
        .adjusted-hero-image {
            height: 570px !important;
        }

        /* 卡片并排显示样式 */
        .horizontal-cards {
            display: flex;
            gap: 20px;
            margin-top: 10px;
            margin-bottom: 30px;
        }

        /* 非绝对定位的卡片样式 */
        .static-card {
            position: relative;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            padding: 15px;
            z-index: 10;
        }

        /* 图片横幅样式 */
        .service-banner {
            display: flex;
            gap: 1.0rem;
            margin-top: 60px;
            justify-content: center;
        }

        .service-banner img {
            max-width: 49%;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .service-banner img:hover {
            transform: translateY(-5px);
        }

        @media (max-width: 768px) {
            .service-banner {
                flex-direction: column;
                align-items: center;
                margin: 3rem 0;
            }

            .service-banner img {
                max-width: 100%;
                margin-bottom: 1.5rem;
            }
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 nav-shadow">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="index.html">
                <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                    style="width: 40px; height: 40px;">
                    <i class="fas fa-heartbeat text-white fs-5"></i>
                </div>
                <span class="fs-4 fw-bold text-primary">智联医防</span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="ai-consultation.html">AI问诊</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="medical-science.html">医学科普</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="mental-health.html">心理健康</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="e-record.html">电子档案</a>
                    </li>
                </ul>

                <div class="d-flex align-items-center position-relative show-dropdown">
                    <a href="profile.html" class="d-flex align-items-center text-decoration-none">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="rounded-circle me-2"
                            style="width: 40px; height: 40px; border: 2px solid var(--primary);">
                        <span class="d-none d-md-inline fw-medium me-1">张明阳</span>
                        <i class="fas fa-angle-down text-muted"></i>
                    </a>

                    <div class="profile-dropdown">
                        <a href="profile.html" class="dropdown-item py-2">
                            <i class="far fa-user me-2"></i>个人资料
                        </a>
                        <a href="#" class="dropdown-item py-2">
                            <i class="fas fa-cog me-2"></i>设置
                        </a>
                        <hr class="dropdown-divider">
                        <a href="#" class="dropdown-item py-2 text-danger">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 首页内容 -->
    <div class="hero-section">
        <div class="container">
            <div class="row align-items-start">
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <h1 class="hero-title text-dark mb-4">
                        智能医疗 <span class="text-primary">守护健康</span>
                    </h1>
                    <p class="text-muted fs-5 mb-5">
                        我们提供便捷的AI问诊、专业的医学科普、全面的心理健康自查以及电子健康档案管理服务，让医疗健康服务触手可及。
                    </p>

                    <div class="d-flex flex-column flex-sm-row mb-5">
                        <a href="ai-consultation.html"
                            class="btn btn-primary btn-lg rounded-pill shadow-lg me-sm-3 mb-3 mb-sm-0 px-4 py-3">
                            <i class="fas fa-stethoscope me-2"></i>立即问诊
                        </a>
                        <a href="medical-science.html"
                            class="btn btn-outline-dark btn-lg rounded-pill shadow px-4 py-3">
                            <i class="fas fa-book me-2"></i>医学科普
                        </a>
                    </div>

                    <!-- 基层医疗和疾病预警卡片 -->
                    <div class="horizontal-cards">
                        <!-- 基层医疗卡片 -->
                        <div class="static-card">
                            <div class="d-flex">
                                <div class="bg-accent bg-opacity-10 p-2 rounded-lg me-3">
                                    <i class="fas fa-hospital text-secondary fs-4"></i>
                                </div>
                                <a href="https://zwfw.nhc.gov.cn/" class="text-white">
                                    <div>
                                        <h5 class="fw-semibold mb-1 text-black">基层医疗</h5>
                                        <p class="text-muted small mb-2">社区卫生服务中心提供便捷的基础医疗服务，点击查看详情。</p>
                                        <p class="text-primary small fw-medium">查看详情</p>
                                    </div>
                                </a>
                            </div>
                        </div>

                        <!-- 疾病预警卡片 -->
                        <div class="static-card">
                            <div class="d-flex">
                                <div class="bg-accent bg-opacity-10 p-2 rounded-lg me-3">
                                    <i class="fas fa-exclamation-triangle text-accent fs-4"></i>
                                </div>
                                <a href="https://www.ndcpa.gov.cn/" class="text-white">
                                    <div>
                                        <h5 class="fw-semibold mb-1 text-black">疾病预警</h5>
                                        <p class=" text-muted small mb-2">季节性流感高发期，请做好个人防护，保持良好卫生习惯。</p>
                                        <p class="text-primary small fw-medium">了解更多</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <div class="text-center">
                            <div class="stats-number">500+</div>
                            <div class="text-muted">专业医生</div>
                        </div>
                        <div class="text-center">
                            <div class="stats-number">10万+</div>
                            <div class="text-muted">用户好评</div>
                        </div>
                        <div class="text-center">
                            <div class="stats-number">24/7</div>
                            <div class="text-muted">全天候服务</div>
                        </div>
                    </div>


                </div>

                <!-- 右边部分 -->
                <div class="col-lg-6 position-relative"
                    style="width: 450px; height: 580px; right: -120px; max-width: none;">
                    <div id="carouselExampleIndicators" class="carousel slide h-100 overflow-hidden rounded-xl">
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                                class="active" aria-current="true" aria-label="Slide 1"></button>
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                                aria-label="Slide 2"></button>
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner h-100">
                            <div class="carousel-item active h-100">
                                <img src="./images/index轮播2.jpg" class="d-block w-100 h-100 object-cover rounded-3"
                                    alt="轮播图1">
                            </div>
                            <div class="carousel-item h-100">
                                <img src="./images/index轮播3.jpg" class="d-block w-100 h-100 object-cover rounded-3"
                                    alt="轮播图2">
                            </div>
                            <div class="carousel-item h-100">
                                <img src="./images/index轮播1.jpg" class="d-block w-100 h-100 object-cover rounded-3"
                                    alt="轮播图3">
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>


                <!-- 新增的图片横幅 -->
                <div class="service-banner" style="margin-top: 80px;">
                    <img src="./images/index02.jpg" alt="医生与患者交流" />
                    <img src="./images/index03.jpg" alt="医疗团队进行手术" />
                </div>

                <!-- 服务特色 -->
                <div class="mt-5 pt-5">
                    <h2 class="section-title text-center text-dark">
                        我们的<span class="text-primary">服务特色</span>
                    </h2>

                    <div class="row g-4">
                        <div class="col-md-6 col-lg-3">
                            <div class="card service-card card-hover" onclick="location.href='ai-consultation.html'">
                                <div class="card-body p-4">
                                    <div class="feature-icon bg-primary bg-opacity-10">
                                        <i class="fas fa-robot text-primary fs-3"></i>
                                    </div>
                                    <h3 class="h5 fw-semibold mb-3">AI智能问诊</h3>
                                    <p class="text-muted mb-0">基于大数据和AI技术，提供智能健康咨询和初步诊断服务。</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-3">
                            <div class="card service-card card-hover" onclick="location.href='medical-science.html'">
                                <div class="card-body p-4">
                                    <div class="feature-icon bg-secondary bg-opacity-10">
                                        <i class="fas fa-video text-secondary fs-3"></i>
                                    </div>
                                    <h3 class="h5 fw-semibold mb-3">视频科普</h3>
                                    <p class="text-muted mb-0">专业医生录制的健康科普视频，通俗易懂地讲解医学知识。</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-3">
                            <div class="card service-card card-hover" onclick="location.href='mental-health.html'">
                                <div class="card-body p-4">
                                    <div class="feature-icon bg-accent bg-opacity-10">
                                        <i class="far fa-heart text-accent fs-3"></i>
                                    </div>
                                    <h3 class="h5 fw-semibold mb-3">心理健康自查</h3>
                                    <p class="text-muted mb-0">提供专业的心理健康测评工具，帮助您了解自己的心理状态。</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-3">
                            <div class="card service-card card-hover" onclick="location.href='e-record.html'">
                                <div class="card-body p-4">
                                    <div class="feature-icon bg-primary bg-opacity-10">
                                        <i class="far fa-file-alt text-primary fs-3"></i>
                                    </div>
                                    <h3 class="h5 fw-semibold mb-3">电子健康档案</h3>
                                    <p class="text-muted mb-0">安全存储您的健康信息，方便随时查看和医生远程诊疗。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="footer">
            <div class="container">
                <div class="row g-5 mb-5">
                    <div class="col-lg-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                                style="width: 40px; height: 40px;">
                                <i class="fas fa-heartbeat text-white"></i>
                            </div>
                            <span class="fs-4 fw-bold text-white">智联医防</span>
                        </div>
                        <p class="text-white-50 mb-4">
                            我们致力于提供便捷、专业的医疗健康服务，让每个人都能享受到高质量的医疗资源。
                        </p>
                        <div class="d-flex">
                            <a href="#" class="btn btn-light btn-sm rounded-circle me-2"
                                style="width: 40px; height: 40px;">
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a href="#" class="btn btn-light btn-sm rounded-circle me-2"
                                style="width: 40px; height: 40px;">
                                <i class="fab fa-weibo"></i>
                            </a>
                            <a href="#" class="btn btn-light btn-sm rounded-circle me-2"
                                style="width: 40px; height: 40px;">
                                <i class="fab fa-qq"></i>
                            </a>
                            <a href="#" class="btn btn-light btn-sm rounded-circle" style="width: 40px; height: 40px;">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-2">
                        <h5 class="text-white mb-4">快速链接</h5>
                        <ul class="list-unstyled footer-links">
                            <li class="mb-2"><a href="index.html">首页</a></li>
                            <li class="mb-2"><a href="ai-consultation.html">AI问诊</a></li>
                            <li class="mb-2"><a href="medical-science.html">医学科普</a></li>
                            <li class="mb-2"><a href="mental-health.html">心理健康</a></li>
                            <li class="mb-2"><a href="e-record.html">电子档案</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-3">
                        <h5 class="text-white mb-4"><a href="https://zwfw.nhc.gov.cn/cxx/"
                                class="text-white"></a>基层医疗信息查询</a></h5>
                        <ul class="list-unstyled footer-links">
                            <li class="d-flex mb-3">
                                <i class="fas fa-map-marker-alt text-primary mt-1 me-3"></i>
                                <span><a href="https://www.nhc.gov.cn/wjw/wsbzxx/wsbz.shtml"
                                        class="text-white">卫生标准查询</a></span>
                            </li>
                            <li class="d-flex mb-3">
                                <i class="fas fa-map-marker-alt text-primary me-3"></i>
                                <span><a href="https://sppt.cfsa.net.cn:8086/db"
                                        class="text-white">食品安全国家标准查询</a></span>
                            </li>
                            <li class="d-flex mb-3">
                                <i class="fas fa-map-marker-alt text-primary me-3"></i>
                                <span><a href="https://www.nhc.gov.cn/wjw/jbywml/list.shtml"
                                        class="text-white">基本药物目录查询</a></span>
                            </li>

                            <li class="d-flex mb-3">
                                <i class="fas fa-map-marker-alt text-primary me-3"></i>
                                <span><a href="https://zwfw.nhc.gov.cn/cxx/qtcx/gjwsczcx/"
                                        class="text-white">国家卫生城镇查询</a></span>
                            </li>
                            <li class="d-flex">
                                <i class="fas fa-map-marker-alt text-primary me-3"></i>
                                <span><a href="https://zwfw.nhc.gov.cn/cxx/ywjgcx/qgyzjg/"
                                        class="text-white">医卫机构查询</a></span>
                            </li>

                        </ul>
                    </div>

                    <div class="col-lg-3">
                        <h5 class="text-white mb-4">医疗信息查询</h5>
                        <p class="text-white-50 mb-4">
                            查询权威医疗数据，获取最新公共卫生服务信息
                        </p>
                        <form>
                            <div class="mb-3">
                                <input type="email" class="form-control bg-dark border-dark text-white"
                                    placeholder="您的邮箱地址">
                            </div>
                            <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill shadow-lg">
                                <i class="fas fa-search me-2"></i>立即查询
                            </button>
                        </form>
                    </div>
                </div>

                <div class="border-top border-gray-800 pt-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                        <p class="text-white-50 mb-3 mb-md-0">
                            &copy; 2025 智联医防服务平台. 保留所有权利.
                        </p>
                        <div class="d-flex">
                            <a href="#" class="text-white-50 me-3">隐私政策</a>
                            <a href="#" class="text-white-50 me-3">服务条款</a>
                            <a href="#" class="text-white-50 me-3">免责声明</a>
                            <a href="#" class="text-white-50">帮助中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Bootstrap JS -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            // 导航栏滚动效果
            window.addEventListener('scroll', function () {
                const navbar = document.querySelector('.navbar');
                if (window.scrollY > 100) {
                    navbar.classList.add('shadow');
                } else {
                    navbar.classList.remove('shadow');
                }
            });
        </script>
</body>

</html>